<template>
	<div id="">
		<el-row>
			<el-col :span="24">
				<el-form :model="queryWhere" :inline="true">
					<el-form-item label="订单状态">
						<el-select v-model="queryWhere.state" placeholder="请选择订单状态">
							<el-option label="全部" :value="0"></el-option>
							<el-option label="已完成" :value="1"></el-option>
							<el-option label="待付款" :value="2"></el-option>
							<el-option label="待收货" :value="3"></el-option>
							<el-option label="已取消" :value="4"></el-option>
							<el-option label="已退货" :value="5"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="initTableData">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>


		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<el-table :data="orderList" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand" label-width="200px">
						<el-form-item label="创建时间">
							<span>{{ props.row.created }}</span>
						</el-form-item>
						<el-form-item label="修改时间">
							<span>{{ props.row.updated }}</span>
						</el-form-item>
						<el-form-item label="支付时间">
							<span>{{ props.row.payment_time }}</span>
						</el-form-item>
						<el-form-item label="发货时间">
							<span>{{ props.row.consign_time }}</span>
						</el-form-item>
						<el-form-item label="交易完成时间">
							<span>{{ props.row.end_time }}</span>
						</el-form-item>
						<el-form-item label="物流名称">
							<span>{{ props.row.shipping_name }}</span>
						</el-form-item>
						<el-form-item label="物流单号">
							<span>{{ props.row.shipping_code }}</span>
						</el-form-item>
						<el-form-item label="收货地址信息">
							<el-button type="info" @click="getOrderAddress(props.row.address_id)">查看收货地址信息</el-button>
						</el-form-item>

					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="订单号" prop="order_code">
			</el-table-column>
			<el-table-column label="金额" prop="payment_money">
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.status == 1" type="success">已完成 </el-tag>
					<el-tag v-if="scope.row.status == 2">待付款 </el-tag>
					<el-tag v-if="scope.row.status == 3" type="info">待收货 </el-tag>
					<el-tag v-if="scope.row.status == 4" type="warning">已取消 </el-tag>
					<el-tag v-if="scope.row.status == 5" type="danger">已退货 </el-tag>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" prop="created">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="primary" @click="getOrderDetail(scope.row.order_code)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>


		<el-dialog title="订单详情列表" :visible.sync="orderDetailsShowFlag">
			<el-table :data="orderDetailsList">
				<el-table-column property="order_details_id" label="订单详情id" width="100"></el-table-column>
				<el-table-column property="goods_name" label="商品名称" width="100"></el-table-column>
				<el-table-column property="item_num" label="商品购买数量" width="150"></el-table-column>
				<el-table-column property="item_title" label="商品标题" width="150"></el-table-column>
				<el-table-column property="item_price" label="商品单价"></el-table-column>
				<el-table-column property="total" label="商品总金额"></el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog title="订单收货信息" :visible.sync="orderAddressShowFlag">
			<el-form label-position="right" :status-icon="true" :model="orderAddressOnly" label-width="120px">
				<el-form-item label="收货地址:" prop="address">
					<el-input v-model="orderAddressOnly.address" disabled></el-input>
				</el-form-item>
				<el-form-item label="收货人:" prop="name">
					<el-input v-model="orderAddressOnly.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话:" prop="tel">
					<el-input v-model="orderAddressOnly.tel" disabled></el-input>
				</el-form-item>
				<el-form-item label="是否为默认地址:" prop="is_default">
					<el-input v-model="orderAddressOnly.is_default !=0?'是':'否'" disabled></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>


	</div>

</template>

<style>
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>

<script>
	export default {
		created: function() {
			this.access_token = window.sessionStorage.getItem("token");
		},
		mounted() {
			this.initTableData();
		},
		methods: {
			//获得收货地址详情 对话框表单显示
			getOrderAddress: async function(addressId) {
				console.log('点击了查看收货地址按钮 地址id为', addressId)
				let _this = this;
				let url = "/api/mall/OrderServlet.do?method=getOrderAddressById";

				await this.$http.get(url, {
					params: {
						addressId: addressId,
					}
				}).then(function(response) {
					console.log("address服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.orderAddressOnly = response.data.data;
						_this.orderAddressShowFlag = true;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			//获得订单详情 对话框 表格显示
			getOrderDetail: async function(order_code) {
				//console.log('order_code', order_code);
				//发送请求查询订单详情

				let _this = this;
				let url = "/api/mall/OrderDetailsServlet.do?method=queryDetailsByOrderId&access_token=" + this
					.access_token;

				await this.$http.get(url, {
					params: {
						order_code: order_code,
					}
				}).then(function(response) {
					console.log("orderdetail服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.orderDetailsList = response.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
				this.orderDetailsShowFlag = true;

			},

			initTableData: function() {
				let _this = this;
				let url = "/api/mall/OrderServlet.do?method=query&access_token=" + this.access_token;


				this.$http.get(url, {
					params: _this.queryWhere
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;
						_this.pageInfo.pageSize = response.data.data.pageSize;
						_this.orderList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},

			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			}
		},
		data: function() {
			return {
				//记录token
				access_token: "",
				orderDetailsList: [],
				orderAddressOnly: [],
				orderDetailsShowFlag: false,
				orderAddressShowFlag: false,
				queryWhere: {
					state: 0, //默认 0代表查询所有状态
					currentPage: 1,
					pageSize:5
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				orderList: []
			}
		}
	}
</script>
